<template>
    <div class="rate">
        <div>☆☆☆☆☆</div>
        <div class="rating" :style="style">★★★★★</div>
    </div>
</template>

<script>
export default {
    props: {
        value:{
            type:[Number,String],
            default: '0'
        }
    },
    computed: {
        style () {
            return `width:${this.value/2}em`
        }
    }
}
</script>

<style lang="stylus" scoped>
    .rate
        display inline-block
        position relative
        font-size 12px
        .rating
            display inline-block
            position absolute
            overflow hidden
            text-align left
            width 0
            top 0
            left 0
</style>
